/**
 * Created by liuzengrong on 2019/8/12.
 */
import React from 'react';
import { List, Avatar, Icon, Tabs } from 'antd';
import { connect } from 'dva';
import Link from 'umi/link';

const { TabPane } = Tabs;

const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

@connect(({ loading, dynamic }: any) => ({
  dynamic,
}))
export default class Service extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {};
  }

  componentWillMount(): void {
    const { dispatch }: any = this.props;
    dispatch({
      type: 'dynamic/fetch',
      payload: {
        page: 1,
        size: 100,
        type: 'C',
        status: 2,
        lesseeCode: '0001',
      },
    });
  }

  handleEnterpriseDynamics = (type: any) => {
    const { dispatch }: any = this.props;
    dispatch({
      type: 'dynamic/fetch',
      payload: {
        page: 1,
        size: 100,
        type: type,
        status: 2,
        lesseeCode: '0001',
      },
    });
  };

  render() {
    const {
      content: { list, page },
    } = this.props.dynamic;
    const listData: Array<any> = [];
    list &&
      list.map(item =>
        listData.push({
          href: '/dynamic/news-detail/' + item.id,
          title: item.article,
          avatar:
            PORTAL_PATH + '/api/file/download?filename=' + item.logo ||
            'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          description: item.title,
          content: item.title,
          logo: PORTAL_PATH + '/api/file/download?filename=' + item.logo,
          id: item.id,
          articleTime:item.articleTime,
          status:item.status,
        }),
      );

    // console.log(listData)

    return (
      <div
        style={{
          maxWidth: '1200px',
          margin: 'auto',
          background: '#fff',
          paddingTop: 80,
          paddingBottom: 80,
        }}
      >
        <Tabs type="card" onChange={this.handleEnterpriseDynamics}>
          <TabPane tab="企业动态" key="C">
            <List
              itemLayout="vertical"
              size="large"
              pagination={{
                onChange: page => {
                  console.log(page);
                },
                pageSize: 10,
              }}
              dataSource={listData}
              renderItem={item => (
                <List.Item
                  key={item.title}
                  actions={[
                    <IconText type="star-o" text={item.id} key="list-vertical-star-o" />,
                    <IconText type="like-o" text={item.id*Math.round(Math.random()*10)} key="list-vertical-like-o" />,
                    <IconText type="message" text={item.status*Math.round(Math.random()*10)} key="list-vertical-message" />,
                    <IconText type="" text={item.articleTime} key="list-vertical-time" />,
                  ]}
                  extra={<img width={272} style={{ height: 100 }} alt="logo" src={item.logo} />}
                >
                  <List.Item.Meta
                    avatar={<Avatar src={item.avatar} />}
                    title={<Link to={item.href}>{item.title}</Link>}
                    description={<Link to={item.href}>{item.description}</Link>}
                  />
                  {/*{item.content}*/}
                </List.Item>
              )}
            />
          </TabPane>
          <TabPane tab="行业动态" key="L">
            <List
              itemLayout="vertical"
              size="large"
              pagination={{
                onChange: page => {
                  console.log(page);
                },
                pageSize: 10,
              }}
              dataSource={listData}
              renderItem={item => (
                <List.Item
                  key={item.title}
                  actions={[
                    <IconText type="star-o" text="156" key="list-vertical-star-o" />,
                    <IconText type="like-o" text="156" key="list-vertical-like-o" />,
                    <IconText type="message" text="2" key="list-vertical-message" />,
                    <IconText type="" text="2018-10-29" key="list-vertical-time" />,
                  ]}
                  extra={<img width={272} style={{ height: 100 }} alt="logo" src={item.logo} />}
                >
                  <List.Item.Meta
                    avatar={<Avatar src={item.avatar} />}
                    title={<Link to={item.href}>{item.title}</Link>}
                    description={<Link to={item.href}>{item.description}</Link>}
                  />
                  {/*{item.content}*/}
                </List.Item>
              )}
            />
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
